<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>float</title>
  <style>
    .box1 {
      width: 500px;
      height: 180px;
      border: 1px solid burlywood;
    }

    .left,
    .right {
      width: 100px;
      height: 150px;
      background-color: burlywood;
    }

    .left {
      float: left;
    }

    .right {
      float: right;
    }

    .box2 {
      width: 500px;
      height: 200px;
      border: 1px solid burlywood;
    }

    .box2 div {
      float: left;
      background-color: burlywood;
      width: 130px;
      height: 80px;
    }

    #div2 {
      background-color: pink;
      height: 120px;
    }

    #div4 {
      background-color: purple;
    }

    .sp-float {
      float: left;
      width: 100px;
      height: 20px;
      background-color: burlywood;
    }

    .p-standard {
      width: 300px;
      height: 30px;
      background-color: blue;
    }

    .float-1,
    .float-2,
    .float-3,
    .float-4 {
      border: 1px solid #000;
    }

    .float-1>div,
    .float-2>div,
    .float-3>div,
    .float-4>div {
      float: left;
      width: 100px;
      height: 100px;
      background-color: peru;
      border: 1px solid #000;
    }

    /* 法一: 隔墙法 */
    .defloat {
      clear: both;
    }

    /* 法二: 父级添加 overflow */
    .float-2 {
      overflow: hidden;
    }

    /* 法三: :after 伪元素法 */
    .clearfix-1:after {
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }

    .clearfix-1 {
      /* IE6,7 */
      *zoom: 1;
    }

    /* 法四: 双伪元素法 */
    .clearfix-2:before,
    .clearfix-2:after {
      content: "";
      display: table;
    }

    .clearfix-2:after {
      clear: both;
    }

    .clearfix-2 {
      /* IE6,7 */
      *zoom: 1;
    }
  </style>
</head>

<body>
  <h3>网页端布局方式分为三种：标准流/浮动/定位</h3>
  <h3>标准流（又称，普通/文档流）</h3>
  <p>按照标签默认的方式排列，块级/行内的基础格式</p>
  <h3>浮动</h3>
  <p>传统行内块，排列一排彼此间是有间隙的！纵向使用标准流，横向使用浮动！</p>
  <div class="box1">
    <div class="left">左</div>
    <div class="right">右</div>
  </div>
  <h4>浮动的特性: </h4>
  <ul>
    <li>浮动元素会脱离标准(脱标)</li>
    <li>浮动盒子不再保留原先的位置(形象地理解:朝屏幕外浮起), 会让出位置给其他标准流的盒子</li>
    <li>浮动元素具有行内块元素特点</li>
  </ul>
  <div class="box2">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
  </div>
  <span class="sp-float">1</span>
  <span class="sp-float">2</span>
  <p class="p-standard">3</p>
  <h4>浮动元素经常和标准流父级搭配使用:(网页布局第一准则)标准流父级规定上下位置,浮动子元素排列左右</h4>
  <h4>父元素没有设置高度,子元素浮动则脱离父元素不占用文档流位置,父元素的高度成了0;所以要清除浮动!</h4>
  <p>
    <code>
      清除浮动:闭合清除
    </code>
  </p>
  <p>
    <code>
        clear : both;
    </code>
  </p>
  <ol>
    <li>额外标签法(隔墙法),W3C推荐做法</li>
    <li>父元素添加 overflow 属性</li>
    <li>父元素添加 after 伪元素</li>
    <li>父元素添加双伪元素</li>
  </ol>

  <h4>隔墙法:</h4>
  <div class="float-1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <!-- 使用空的块级元素隔成一个墙,撑开父级,防止子元素浮动照成的影响,但是结构性就比较差 -->
    <p class="defloat"></p>
  </div>

  <h4>overflow:</h4>
  <div class="float-2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

  <h4>伪元素法: 相当于隔墙法,after伪元素在其后添加了一个元素</h4>
  <div class="float-3 clearfix-1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>

  <h4>双伪元素法:</h4>
  <div class="float-4 clearfix-2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</body>

</html>